$spinWhileLoading: false !default;
$spinWhileWaiting: false !default;
$overlayWhileLoading: false !default;
$zoomThumbOnHover: false !default;
$zoomOutWhileLoading: false !default;

cx-picture {
  @if $zoomOutWhileLoading == true {
    &.initialized.loading {
      --cx-zoom: 0.5;
    }
  }

  @if $spinWhileLoading == true OR $spinWhileWaiting == true {
    &:after {
      @extend %spinner !optional;
    }
  }

  // the effects run always, but are made visible only when loading or waiting
  // this is done so we can slowly fadein/out the effect
  @if $spinWhileLoading == true {
    &.loading:after {
      --cx-opacity: 1;
    }
  }
  @if $spinWhileWaiting == true {
    &.waiting:after {
      --cx-opacity: 1;
    }
  }
}

.thumbs {
  cx-picture {
    @if $zoomThumbOnHover == true {
      &:hover:not(.active) {
        --cx-zoom: 1.3;
      }
    }

    @if $overlayWhileLoading == true {
      &.initialized:before {
        @extend %overlay !optional;
      }
      // the effects run always, but are made visible only when loading or waiting
      // this is done so we can slowly fadein/out the effect
      &.loading:before,
      &.waiting:before {
        --cx-opacity: 1;
      }
    }
  }
}
